<template>
  <view>
    <u-navbar title="收银台" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#333" back-icon-color="#333"></u-navbar>
    <view class="" style="text-align: center; margin-top: 96rpx">
      <view class="" style="font-size: 28rpx">实付金额</view>
      <view class="" style="font-size: 32rpx; font-weight: bold; padding-top: 20rpx">￥{{ pic }}</view>
      <view class="" style="font-size: 26rpx; color: #999999; padding-top: 10rpx" @tap="detail">订单详情></view>
    </view>
    <!-- 支付方式 -->
    <view class="" style="margin: 0 28rpx; background: #fff; border-radius: 20rpx; font-size: 30rpx; margin-top: 91rpx">
      <view class="" style="font-weight: bold; padding: 31rpx 28rpx">支付方式</view>
      <!-- 微信支付 -->
      <view class="flex align-center" @tap="radio = 0" style="padding: 0 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between">
        <view class="" style="display: flex; align-items: center">
          <!-- ../../static/index/wxpay.png -->
          <image src="https://wenzhen.jiangkukeji360.com/static/index/wxpay.png" mode="" style="width: 70upx; height: 70upx"></image>
          <view class="flex-sub margin-left-sm" style="font-size: 28rpx; padding-left: 12rpx">微信支付</view>
        </view>

        <radio :checked="radio == 0 ? true : false" color="#FF6572" style="transform: scale(0.7)"></radio>
      </view>
      <!-- <view class="flex align-center margin-top" @tap="radio = 1" style="padding: 0 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between">
        <view class="" style="display: flex; align-items: center">
          <image src="../../static/index/zfbpay.png" mode="" style="width: 70upx; height: 70upx"></image>
          <view class="flex-sub margin-left-sm" style="font-size: 28rpx; padding-left: 12rpx">支付宝支付</view>
        </view>

        <radio :checked="radio == 1 ? true : false" color="#FF6572" style="transform: scale(0.7)"></radio>
      </view> -->
      <view
        class="flex align-center margin-top"
        @tap="radio = 2"
        style="padding: 0 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between; padding-top: 25rpx; padding-bottom: 67rpx"
      >
        <view class="" style="display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/ye.png" mode="" style="width: 70upx; height: 70upx"></image>
          <view class="flex-sub margin-left-sm" style="font-size: 28rpx; padding-left: 12rpx">余额支付</view>
        </view>

        <radio :checked="radio == 2 ? true : false" color="#FF6572" style="transform: scale(0.7)"></radio>
      </view>
    </view>
    <!-- 底部栏 -->
    <view class="" style="width: 100%; height: 200rpx; background: #fff; position: fixed; bottom: 0">
      <view class="btn" @tap="pay">立即支付</view>
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      radio: 1,
      id: '',
      pic: ''
    };
  },
  //方法
  methods: {
    pay() {
      this.api({
        url: '/api//shop/payOrder',
        method: 'post',
        data: {
          order_id: this.id,
          pay_type: this.radio == 0 ? 'wechat' : 'money',
          source: 'miniapp'
        }
      }).then((res) => {
        if (this.radio == 2) {
          uni.showToast({
            title: '支付成功',
            icon: 'none'
          });
          uni.navigateTo({
            url: '/pages/shop/paysucc?type=1'
          });
        } else {
          console.log(res.data.response);
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: res.data.response.timeStamp,
            nonceStr: res.data.response.nonceStr,
            package: res.data.response.package,
            signType: res.data.response.signType,
            paySign: res.data.response.paySign,
            success: function (res) {
              uni.navigateTo({
                url: '/shop/paysucc/paysucc?type=1'
              });
            },
            fail: function (err) {
              uni.navigateTo({
                url: '/shop/paysucc/paysucc?type=2'
              });
            }
          });
        }
      });
    },
    detail() {
      uni.navigateTo({
        url: '/shop/orderdetail/orderdetail?id=' + this.id
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    this.pic = options.pic;
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
.btn {
  margin: 60rpx 110rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #e50014, #ff6572);
  border-radius: 40rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  color: #ffffff;
}
</style>
